<template>
	<el-dialog title="预览" :append-to-body="true" :visible.sync="visible" :before-close="close" :close-on-click-modal="false" fullscreen>
    <el-button type="success" v-print="'#dispense'">打印</el-button>
	<p></p>
    <div id="dispense" class="dispense">
      <div class="group" v-for="(g, index) in groupGets" :id="gId(index)" :key="index">
          <table width="300px" border="1px" style="line-height: 20px;font-family:Arial,SimSun;" >
            <tr>
				<td style="border-right:none;text-align: center;">
					<img src="../../../assets/img/printdispense-logo.png"/>
				</td>
				<td style="border-left:none;text-align: center;">
					<span style="font-weight: 900;">样品发放检验标签卡</span>
					<br />
					SMP-QC-019-F01-01
				</td>
			</tr>
            <tr>
              <td width="100px" style="text-align: center;">样品编号</td>
              <td colspan="5"></td>
            </tr>
			<tr>
			  <td style="text-align: center;">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</td>
			  <td colspan="5">&nbsp;{{checkList.productName}}</td>
			</tr>
			<tr>
			  <td style="text-align: center;">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</td>
			  <td colspan="5">
					<span v-html="'&nbsp;'+checkList.productSpec"></span>
				</td>
			</tr>
			<tr>
			  <td style="text-align: center;">批&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</td>
			  <td colspan="5">&nbsp;{{checkList.batchNum}}</td>
			</tr>
			<tr>
			  <td style="text-align: center;">来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</td>
			  <td colspan="5">
				  &nbsp;{{zcList==null?checkList.registCheckDepartmentName:zcList.workshopName+"-"+zcList.procedureName}}
			  </td>
			</tr>
            <tr>
			  <td style="text-align: center;">发放数量</td>
              <td colspan="5">&nbsp;{{g.inspectionGroupName+g.groupGetQuantity+g.groupGetUnitName}}</td>
            </tr>
			<tr>
			  <td style="text-align: center;">发放人/日期</td>
			  <td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			</tr>
            <tr>
			  <td style="text-align: center;">贮存条件</td>
              <td colspan="5">&nbsp;{{storageCondition}}</td>
            </tr>
          </table>
		  <p>&nbsp;</p>
      </div>
    </div>
    </el-dialog>
</template>

<script>
  import { CODE_OK } from '@/common/js/config'
  import { isBlank,parseTime } from '@/common/js/utils'
  import { getPrintDisInfo } from '@/api/check'
  import Calc from 'calculatorjs'
	export default {
    data() {
      return {
        maxHeight: 186,
        visible: false,
        into: false,
        lastSubDiff: -666,
        lastAddDiff: -999,
        checkList: {
          productName: null,
          batchNum: null,
          productSpec: null,
          receiveDate: null
        },
		zcList:null,
		yfbList:null,
        groupGets: [{
          inspectionGroupName: null,
          groupGetQuantity: null,
          groupGetUnitName: null,
          item: null
        }],
        receive: {},
        isEdit: false,
        editing: false,
        paintCount: 0,
		storageCondition:""
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        if (this.childDataForm.isEdit) {
          this.isEdit = true
          this.changeEdit()
        }else{
          this.checkList = this.childDataForm.list
          this.getInfo()
        }
		console.log(this.checkList)
        this.visible = true
      }
    },
    methods: {
      addGroupGet() {
        let g = JSON.parse(JSON.stringify(this.groupGets[this.groupGets.length - 1]))
        this.groupGets.push(g)
        this.$nextTick(() => {
          this.editCss()
        })
      },
      subGroupGet() {
        this.groupGets.pop()
        this.$nextTick(() => {
          this.editCss()
        })
      },
      changeEdit() {
        this.editing = !this.editing
        this.$nextTick(() => {
          this.editCss()
        })
        if (!this.editing) {
          this.$nextTick(() => {
            this.paint(0)
          })
        }
      },
      editCss() {
        if (this.editing) {
          $(".list-r").css({"border-bottom" : "none"})
        }else{
          $(".list-r").css({"border-bottom" : "1px solid black"})
        }
      },
      getInfo() {
        const params = {
          checkId: this.checkList.checkId,
          isTest: this.checkList.isTest,
          isAllTest: this.checkList.isAllTest
        }
        getPrintDisInfo(params).then(res => {
          if (res.code === CODE_OK) {
            // 如果是稳考，，那么在备注加上稳考信息
            let info = '&nbsp;'
            if (this.checkList.checkTypeId == 6) {
              info = this.checkList.stabilityModeName + this.checkList.timeValue + this.checkList.timeName
            }else if(this.checkList.checkTypeId == 4 || this.checkList.checkTypeId == 5){
			  this.zcList = res.info.zcList
			}
			this.storageCondition = res.storageCondition
            this.groupGets = res.info.groupGets.map(g => {
              this.$set(g,'fullToMaxHeight',0)
              this.$set(g,'remark',info)
              return g
            })
            this.receive = res.info.receive
            if (this.receive.surplusQuantity > 0) {
              this.groupGets.push({
                inspectionGroupName: '剩余检品',
                groupGetQuantity: this.receive.surplusQuantity,
                groupGetUnitName: this.receive.receiveUnitName,
                itemNames: "/"
              })
            }
            // this.$nextTick(() => {
            //   this.paint(0)
            // })
          }else{
            this.$message.error(res.msg)
            this.close()
          }
        })
      },
      paint(index) {
        this.paintCount++
        // if (this.paintCount > 21) {
        //   this.$message.error('渲染标签次数已经超过最大次数(20),请联系管理员解决')
        //   return
        // }
        if (index == this.groupGets.length) return
        let gId = this.gId(index)
        let currentHeight = this.getHeightById(gId)
        if (this.lastAddDiff == this.lastSubDiff) {
          this.groupGets[index].fullToMaxHeight = this.maxHeight - currentHeight
          this.$nextTick(() => {
            this.paint(index + 1)
          })
          return
        }
        if (currentHeight < this.maxHeight) {
          let diff = this.maxHeight - currentHeight
          //差值小于8，填充空白
          if (diff <= 8){
            this.groupGets[index].fullToMaxHeight = this.maxHeight - currentHeight
          }else{
            //差值大于8，line-height + 1
            let nowPxNum = $(".dispense").css("line-height").replace('px','') * 1
            let nextPxNum = Calc.add(nowPxNum,1)
            $(".dispense").css({"line-height" : nextPxNum+'px'})
            this.lastAddDiff = this.getHeightById(gId) - currentHeight
            this.$nextTick(() => {
              this.paint(0)
            })
            return
          }
        }else if(currentHeight > this.maxHeight){
          let nowPxNum = $(".dispense").css("line-height").replace('px','') * 1
          let nextPxNum = Calc.sub(nowPxNum,1)
          $(".dispense").css({"line-height" : nextPxNum+'px'})
          this.lastSubDiff = currentHeight - this.getHeightById(gId)
          this.$nextTick(() => {
            this.paint(0)
          })
          return
        }
        this.$nextTick(() => {
          this.paint(index + 1)
        })
      },
      close() {
        this.visible = false
        this.$emit('close')
      },
      gId(index) {
        return 'group_' + index
      },
      getHeightById(id) {
        return parseInt(window.getComputedStyle(document.getElementById(id)).getPropertyValue('height'))
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>

</style>
